<template>
	<div class="OriginalBookItem" @click="Original_itemclick">
		<!-- 把book_items的数据再传下去，传给书本详情页 -->
		<slot name="delbut"></slot>

		<div class="Original_pic"><img :src="floorCover"></div>
		<div class="Original_tex">
			<p class="Original_tit">{{Original_items.book_name}}</p>
			<p class="Original_aut">{{Original_items.author}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'OriginalBookItem',
		props: {
			Original_items: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				img_item: false,
				Special_Area: [require('../../assets/img/Original_cover/Original_cover_001.jpg'), require('../../assets/img/Original_cover/Original_cover_002.jpg')],
				item_data: [],
				floorCover: [],
			}
		},
		methods: {
			// 点击小书籍块实现携带参数跳转
			Original_itemclick() {
				//方式1，可以用动态路由方式
				// query方式拼接路由
				this.$router.push('/originaldetailPage/' + this.Original_items.id)
			}
		},
		mounted() {
			this.floorCover = this.Special_Area[Math.floor((Math.random()*this.Special_Area.length))]
		}
	}
</script>

<style>
	.OriginalBookItem {
		width: 45%;
		border-radius: 8px;
		position: relative;
		padding-bottom: 60px;
	}
	.OriginalBookItem img {
		width: 100%;
		border-radius: 5px;
	}

	.Original_tex {
		font-size: 16px;
		text-align: center;
		overflow: hidden;
		position: absolute;
		/* bottom: 5px; */
		left: 0;
		right: 0;
	}

	.Original_tex .Original_tit {
		color: #8C8C8C;
		text-overflow: ellipsis;
		/* 设置文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */
		white-space: nowrap;
	}

	.Original_tex .Original_aut {
		color: rgb(142,47,57);
		font-size: 13px;
		text-align: center;
		margin-top: -10px;
	}
</style>
